<template>
  <div class="basecontent">
      <h4>基础内容维护</h4>
      <div class="container" style="padding:0;">
          <!-- 费用设置 -->
          <div class="charge_set">
              <h4>费用设置</h4>
              <div class="info" style="padding: 10px 30px 5px;">
                  <div>订单服务费比例：<el-input size="mini" v-model="serviceFeeMerchant" placeholder="请输入内容" class="filter-input"></el-input>( &nbsp;请输入0~1之间的数字，最多两位小数&nbsp; )</div>
              </div>
              <div class="info" style="padding:5px  30px 10px;">
                   <div>订单服务费优惠折扣：<el-input size="mini" v-model="serviceFeeDisMerchant" placeholder="请输入内容" class="filter-input"></el-input>( &nbsp;请输入0~1之间的数字，最多两位小数。无折扣时请填入1&nbsp; )</div>
              </div>
              <!-- <div class="info" style="padding:5px  30px 10px;">
                   <div>供货商提现服务费比例：<el-input size="mini" v-model="input" placeholder="请输入内容" class="filter-input"></el-input>%</div>
              </div> -->
              <div class="info" style="padding:5px  30px 10px;">
                   <div>供货商认证费：<el-input size="mini" v-model="authFee" placeholder="请输入内容" class="filter-input"></el-input>元</div>
              </div>
              <div class="info" style="padding:5px  30px 10px;">
                   <div>供应商服务费：<el-input size="mini" v-model="authFee" placeholder="请输入内容" class="filter-input"></el-input>元</div>
              </div>
              <div class="info" style="padding:5px  30px 10px;">
                   <div>供应商服务费折扣:
                       <el-input size="mini" v-model="serviceFeeDisFarmer" 
                          placeholder="请输入内容" class="filter-input">
                       </el-input>
                       ( &nbsp;请输入0~1之间的数字，最多两位小数。无折扣时请填入1&nbsp; )
                   </div>
              </div>
              <div class="info" style="padding:5px  30px 10px;">
                   <div>供货商提现服务费比例:<el-input size="mini" v-model="serviceFeeFarmer" placeholder="请输入内容" class="filter-input"></el-input>( &nbsp;请输入0~1之间的数字，最多两位小数&nbsp; )</div>
              </div>
              <div class="info" style="padding:5px  30px 10px;">
                   <div>供货商提现服务服折扣:
                       <el-input size="mini" v-model="serviceFeeDisFarmer" 
                          placeholder="请输入内容" class="filter-input">
                       </el-input>
                       ( &nbsp;请输入0~1之间的数字，最多两位小数。无折扣时请填入1&nbsp; )
                   </div>
              </div>
          </div>
          <!-- 养殖户端通知内容 -->
          <div class="">
              <h4>供货商端通知内容维护</h4>     
              <div class="info">
                <el-form  label-position="right" label-width="140px" >
                    <el-form-item label="开市之前:">
                        <el-input v-model="beforeTrade" class="input-item"></el-input>
                    </el-form-item>
                    <el-form-item label="交易过程中:">
                        <el-input v-model="inTrade" class="input-item"></el-input>
                    </el-form-item>
                    <el-form-item label="交易结束:">
                          <el-input v-model="afterTrade" class="input-item"></el-input>
                    </el-form-item>
                 </el-form>
              </div>
          </div>
          <div class="info">
                  <el-button type="primary" style="display:block;margin: 0 auto;" @click="submit()">保存</el-button>
          </div>
      </div>
  </div>
</template>
<script>
import { setFee,get_fee } from '@/request/api'
export default {
    data(){
        return {
            //  订单服务费比例：
            serviceFeeMerchant:'', //  订单服务费比例
            serviceFeeDisMerchant:'', // 订单服务费优惠折扣
            serviceFeeFarmer:'', //   供货商提现服务费比例
            serviceFeeDisFarmer:'', // 供货商提现服务费折扣
            authFee:'',         //    供货商认证费：
            beforeTrade:'',    // 
            inTrade:'' ,      // 
            afterTrade:' ' , //  
            // 订单服务费优惠折扣：
            // 供货商提现服务费比例
            // 供货商认证折扣：
        }
    },
    created(){
       get_fee().then(res => {
            console.log(res);
            if(res.code == 1) {
                this.serviceFeeMerchant = res.data.serviceFeeMerchant;
                this.serviceFeeDisMerchant = res.data.serviceFeeDisMerchant;
                this.serviceFeeFarmer = res.data.serviceFeeFarmer;
                this.serviceFeeDisFarmer  = res.data.serviceFeeDisFarmer;
                this.authFee = res.data.authFee;
                this.beforeTrade = res.data.beforeTrade;
                this.inTrade = res.data.inTrade;
                this.afterTrade = res.data.afterTrade;
            }
       })
    },
    methods:{
        // 编辑 
        edit(a,b){
           this.form.textarea = b;
           this.dialogFormVisible = true; 
        },
        // 删除
       del(id){
           this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
           }).then(()=>{
                this.$message({
                        type: 'success',
                        message: '删除成功!'
                });
            }).catch(()=>{
                this.$message({
                        type: 'info',
                        message: '已取消删除'
                });  
            }) 
        },
        newAdd(){
            this.form.textarea = ''
            this.dialogFormVisible = true;
        },
        submit(){
             var reg = /(^0.[0-9]{1,2}$)|(^1.[0]{1,2}$)|(^0$)|(^1$)/;
             if(!reg.test(this.serviceFeeMerchant)) {
                 // 订单服务费比例
                 this.$message({
                            type: 'info',
                            message: '请输入合法订单服务费比例'
                 }); 
                 this.serviceFeeMerchant = ''
                 return false;
             }
             if(!reg.test(this.serviceFeeDisMerchant)) {
                 // 订单服务费优惠折扣
                 this.$message({
                            type: 'info',
                            message: '请输入合法订单服务费优惠折扣'
                 }); 
                 this.serviceFeeDisMerchant = ''
                 return false;
             }
             if(!reg.test(this.serviceFeeFarmer)) {
                 // 供货商提现服务费比例
                  this.$message({
                            type: 'info',
                            message: '请输入合法供货商提现服务费比例'
                 }); 
                 this.serviceFeeFarmer = '';
                 return false;
             }
             if(!reg.test(this.serviceFeeDisFarmer)) {
                 // 供货商提现服务服折扣:
                  this.$message({
                    type: 'info',
                    message: '请输入合法供货商提现服务服折扣'
                 }); 
                 this.serviceFeeDisFarmer = '';
                 return false;
             }
             setFee({
                serviceFeeMerchant:this.serviceFeeMerchant,
                serviceFeeDisMerchant:this.serviceFeeDisMerchant,
                serviceFeeFarmer:this.serviceFeeFarmer,
                serviceFeeDisFarmer:this.serviceFeeDisFarmer,
                authFee:this.authFee,
                beforeTrade:this.beforeTrade,
                inTrade:this.inTrade,
                afterTrade:this.afterTrade
             }).then(res => {
                 console.log(res);
                 if(res.code == 1) {
                       this.$message({
                            type: 'success',
                            message: '设置成功'
                       });  
                 }
             })
        }
    }
 }
</script>
<style  scoped>
.basecontent > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.container {
    line-height:50px;
    border-radius: 0;
}
.container h4 {
    background-color: #eee;
    line-height: 50px;
    font-weight: 400;
    font-size:16px;
    padding-left:30px;
    color: #999;

}
.container .info {
    padding:  30px;
    display: flex;
    
}
.container .info div {
    margin-right: 40px;
}
.filter-input {
    width:140px;
    display: inline-block;
}
.input-item {
    width: 360px;
}
</style>